전환 탐색: 브라우저 확장 프로그램 Manifest V3 JavaScript API 마이그레이션 전략

브라우저 확장 프로그램 개발 환경은 끊임없이 진화하고 있습니다. 최근 몇 년 동안 가장 큰 변화 중 하나는 Manifest V3 (MV3)의 도입입니다. Google Chrome에서 시작되었지만 다른 Chromium 기반 브라우저와 Firefox에 점점 더 영향을 미치는 이 업데이트는 전 세계 사용자의 보안, 개인 정보 보호 및 성능 향상을 목표로 합니다. 개발자에게 이 전환은 특히 JavaScript API와 관련하여 변경 사항에 대한 깊은 이해가 필요합니다. 이 포괄적인 가이드는 기존 Manifest V2 확장 프로그램을 MV3로 효과적으로 마이그레이션하고, 제작물이 새로운 환경에서 계속 작동하고 번창할 수 있도록 하는 데 필요한 지식과 전략을 제공합니다.

Manifest V3의 핵심 변경 사항 이해

Manifest V3는 브라우저 확장 프로그램이 작동하는 방식을 근본적으로 재고하는 것입니다. 이러한 변화의 주요 원동력은 다음과 같습니다.

• 향상된 보안: MV3는 확장 프로그램이 실행할 수 있는 코드 유형과 웹 페이지와 상호 작용할 수 있는 방식을 제한하는 더 엄격한 보안 정책을 도입합니다.
• 개선된 개인 정보 보호: 새로운 모델은 특정 민감한 API에 대한 액세스를 제한하고 더 투명한 데이터 처리를 장려하여 사용자 개인 정보 보호를 강조합니다.
• 더 나은 성능: 일부 구형 아키텍처를 벗어나 MV3는 확장 프로그램이 브라우저 속도 및 리소스 소비에 미치는 성능 영향을 줄이는 것을 목표로 합니다.

JavaScript API 관점에서 가장 큰 영향을 미치는 변경 사항은 다음과 같습니다.

• 백그라운드 페이지를 대체하는 서비스 워커: 영구 백그라운드 페이지 모델은 이벤트 기반 서비스 워커로 대체되고 있습니다. 즉, 백그라운드 로직은 필요할 때만 실행되므로 상태 관리 및 이벤트 처리에 대한 다른 접근 방식이 필요하며 성능을 크게 향상시킬 수 있습니다.
• Web Request API 수정: 네트워크 요청 가로채기에 널리 사용되는 강력한 `chrome.webRequest` API는 MV3에서 크게 제한됩니다. 덜 유연하지만 개인 정보를 더 잘 보호하고 성능이 뛰어난 `declarativeNetRequest` API로 대체됩니다.
• 콘텐츠 스크립트 실행 변경 사항: 콘텐츠 스크립트는 유지되지만, 실행 컨텍스트와 기능이 개선되었습니다.
• `eval()` 및 `new Function()` 제거: 보안상의 이유로 `eval()` 및 `new Function()`은 더 이상 확장 코드에서 허용되지 않습니다.

주요 JavaScript API 마이그레이션 및 전략

주요 JavaScript API 마이그레이션의 세부 사항을 살펴보고 각각에 대한 효과적인 전략을 살펴보겠습니다.

1. 백그라운드 스크립트에서 서비스 워커로의 마이그레이션

이것은 아마도 가장 근본적인 변화일 것입니다. Manifest V2 확장 프로그램은 항상 실행 중인 영구 백그라운드 페이지에 의존하는 경우가 많았습니다. Manifest V3는 서비스 워커를 도입했는데, 이는 이벤트 기반이며 이벤트(예: 확장 프로그램 설치, 브라우저 시작 또는 콘텐츠 스크립트의 메시지)에 의해 트리거될 때만 실행됩니다.

변경 이유는 무엇입니까?

영구 백그라운드 페이지는 특히 많은 확장 프로그램이 활성화된 경우 상당한 리소스를 소비할 수 있습니다. 서비스 워커는 확장 프로그램 로직이 필요한 경우에만 실행되도록 보장하는 보다 효율적인 모델을 제공하여 브라우저 시작 속도를 높이고 메모리 사용량을 줄입니다.

마이그레이션 전략:

• 이벤트 기반 로직: 백그라운드 로직을 이벤트 기반으로 다시 설계합니다. 백그라운드 스크립트가 항상 사용 가능하다고 가정하는 대신 특정 이벤트를 수신 대기합니다. 서비스 워커의 기본 진입점은 일반적으로 `install` 이벤트이며, 여기에서 리스너를 설정하고 확장 프로그램을 초기화할 수 있습니다.
• 메시지 전달: 서비스 워커는 항상 활성 상태가 아니므로 다른 확장 프로그램 부분(예: 콘텐츠 스크립트, 팝업, 옵션 페이지)과 서비스 워커 간의 비동기 메시지 전달에 크게 의존해야 합니다. 통신을 위해 `chrome.runtime.sendMessage()` 및 `chrome.runtime.onMessage()`를 사용합니다. 메시지 처리기가 강력하고 서비스 워커를 활성화해야 하는 경우에도 메시지를 처리할 수 있는지 확인합니다.
• 상태 관리: 영구 백그라운드 페이지는 메모리에 전역 상태를 유지할 수 있습니다. 서비스 워커를 사용하면 이 상태가 워커가 종료될 때 손실될 수 있습니다. 서비스 워커 종료를 방지해야 하는 상태를 유지하려면 chrome.storage(local 또는 sync)를 사용합니다.
• 수명 주기 인식: 서비스 워커 수명 주기를 이해합니다. 활성화, 비활성화 및 다시 시작될 수 있습니다. 코드는 이러한 전환을 원활하게 처리해야 합니다. 예를 들어 활성화 시 항상 이벤트 리스너를 다시 등록합니다.
• 예:

  Manifest V2 (background.js):

              chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed. Setting up listeners...');
    chrome.alarms.create('myAlarm', { periodInMinutes: 1 });
  });
  
  chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === 'myAlarm') {
      console.log('Alarm triggered!');
      // Perform some background task
    }
  });
              
  
                
                  Copy
                
              
            

  Manifest V3 (service-worker.js):

              // Service worker installation
  chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed. Setting up alarms...');
    chrome.alarms.create('myAlarm', { periodInMinutes: 1 });
  });
  
  // Event listener for alarms
  chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === 'myAlarm') {
      console.log('Alarm triggered!');
      // Perform some background task
      // Note: If the service worker was terminated, it will be woken up for this event.
    }
  });
  
  // Optional: Handle messages from other parts of the extension
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'getData') {
      // Simulate fetching data
      sendResponse({ data: 'Some data from service worker' });
    }
    return true; // Keep the message channel open for async response
  });
              
  
                
                  Copy
                
              
            

2. `chrome.webRequest`를 `declarativeNetRequest`로 대체

`chrome.webRequest` API는 네트워크 요청을 가로채고, 차단하고, 수정하고, 리디렉션하는 광범위한 기능을 제공했습니다. Manifest V3에서는 보안 및 개인 정보 보호상의 이유로 그 기능이 크게 제한됩니다. 주요 대체품은 `declarativeNetRequest` API입니다.

변경 이유는 무엇입니까?

`webRequest` API를 통해 확장 프로그램은 브라우저에서 수행된 모든 네트워크 요청을 검사하고 수정할 수 있었습니다. 이는 확장 프로그램이 민감한 사용자 데이터를 기록할 수 있으므로 개인 정보 보호 위험을 야기했습니다. 또한 모든 요청에 대한 JavaScript 가로채기는 속도가 느릴 수 있으므로 성능에도 영향을 미쳤습니다. `declarativeNetRequest`는 가로채기 로직을 브라우저의 기본 네트워크 스택으로 옮기므로, 확장 프로그램이 명시적으로 허용하지 않는 한 요청 세부 정보를 직접 볼 수 없으므로 성능이 더 뛰어나고 개인 정보 보호가 향상됩니다.

마이그레이션 전략:

• 선언적 규칙 이해: `declarativeNetRequest`는 명령형 코드 대신 선언적 접근 방식을 사용합니다. 일치하는 네트워크 요청에 수행할 작업(예: 차단, 리디렉션, 헤더 수정)을 지정하는 규칙 세트(JSON 객체)를 정의합니다.
• 규칙 정의: 규칙은 조건(예: URL 패턴, 리소스 유형, 도메인) 및 작업을 지정합니다. `webRequest` 차단 또는 리디렉션 로직을 이러한 규칙 세트로 변환해야 합니다.
• 규칙 제한: 등록할 수 있는 규칙 및 규칙 세트 수에 대한 제한을 인지하십시오. 복잡한 필터링 시나리오의 경우 규칙 세트를 동적으로 업데이트해야 할 수 있습니다.
• 동적 수정 없음: `webRequest`와 달리 `declarativeNetRequest`는 동일한 방식으로 요청 본문 또는 헤더의 동적 수정을 허용하지 않습니다. 확장 프로그램의 핵심 기능이 심층적인 요청 수정에 의존하는 경우 설계를 재평가하거나 대체 접근 방식을 모색해야 할 수 있습니다.
• 차단 대 리디렉션: 요청 차단은 간단합니다. 리디렉션의 경우 새 URL을 지정하여 `redirect` 작업을 사용합니다.
• 헤더 조작: MV3는 요청 헤더를 수정하는 데 제한이 있습니다. `declarativeNetRequest`에서 `requestHeaders` 및 `responseHeaders`를 사용하여 특정 헤더를 추가하거나 제거할 수 있지만 복잡한 변환은 지원되지 않습니다.
• 성능 고려 사항: 일반적으로 더 빠르지만, 많은 수의 규칙을 관리하는 것은 여전히 성능에 영향을 미칠 수 있습니다. 효율성을 위해 규칙 세트를 최적화하십시오.
• 예:

  Manifest V2 (이미지 차단):

              chrome.webRequest.onBeforeRequest.addListener(
    function(details) { return { cancel: true }; },
    { urls: ["*://*.example.com/*.png"] },
    ["blocking"]
  );
              
  
                
                  Copy
                
              
            

  Manifest V3 (`declarativeNetRequest` 사용):

  먼저 JSON 파일(예: rules.json)에 규칙을 정의합니다.

              [
    {
      "id": 1,
      "priority": 1,
      "action": {"type": "block"},
      "condition": {
        "urlFilter": "*.png",
        "domains": ["example.com"],
        "resourceTypes": ["image"]
      }
    }
  ]
              
  
                
                  Copy
                
              
            

  그런 다음 서비스 워커(또는 초기 설정 스크립트)에서:

              chrome.runtime.onInstalled.addListener(() => {
    chrome.declarativeNetRequest.updateDynamicRules({
      addRules: [
        {
          "id": 1,
          "priority": 1,
          "action": {"type": "block"},
          "condition": {
            "urlFilter": "*.png",
            "domains": ["example.com"],
            "resourceTypes": ["image"]
          }
        }
      ],
      removeRuleIds: [1] // To remove if it already exists
    });
  });
              
  
                
                  Copy
                
              
            

3. 콘텐츠 스크립트 실행 및 통신 처리

콘텐츠 스크립트는 웹 페이지의 컨텍스트에서 실행되는 JavaScript 파일입니다. 기본 목적은 동일하게 유지되지만, MV3는 실행 방법과 나머지 확장 프로그램과의 상호 작용을 개선합니다.

주요 변경 사항 및 전략:

• 실행 컨텍스트: 콘텐츠 스크립트는 여전히 페이지에 삽입될 수 있습니다. 그러나 `chrome.scripting.executeScript`를 통해 JavaScript를 직접 삽입하는 기능이 이제 스크립트를 삽입하는 데 선호되는 프로그래밍 방식입니다.
• 비동기 삽입: `chrome.scripting.executeScript`를 사용하는 경우 실행은 비동기적입니다. DOM 또는 전역 범위와 상호 작용하기 전에 스크립트가 삽입되고 실행될 때까지 코드가 기다리는지 확인합니다.
• `frameId` 인식: 확장 프로그램이 iframe과 상호 작용하는 경우 스크립트를 삽입하거나 메시지를 보낼 때 `frameId` 속성을 염두에 두십시오.
• DOM 액세스: DOM에 액세스하는 것은 주요 기능으로 남아 있습니다. 그러나 DOM 조작이 호스트 페이지의 자체 스크립트와 간섭할 가능성을 인지하십시오.
• 서비스 워커와의 통신: 콘텐츠 스크립트는 확장 프로그램의 백엔드 로직이 필요한 작업을 위해 서비스 워커(백그라운드 페이지를 대체)와 통신해야 합니다. `chrome.runtime.sendMessage()` 및 `chrome.runtime.onMessage()`를 사용합니다.
• 예:

  스크립트 삽입 및 통신(Manifest V3):

              // From your popup or options page
  chrome.scripting.executeScript({
    target: { tabId: YOUR_TAB_ID },
    files: ['content.js']
  }, (results) => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError);
      return;
    }
    console.log('Content script injected:', results);
  
    // Now communicate with the injected content script
    chrome.tabs.sendMessage(YOUR_TAB_ID, {
      action: "processPage"
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError);
        return;
      }
      console.log('Response from content script:', response);
    });
  });
  
  // In content.js:
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "processPage") {
      console.log('Processing page...');
      const pageTitle = document.title;
      // Perform some DOM manipulation or data extraction
      sendResponse({ success: true, title: pageTitle });
    }
    return true; // Keep the channel open for async response
  });
              
  
                
                  Copy
                
              
            

4. `eval()` 및 `new Function()` 제거

보안상의 이유로 Manifest V3에서는 확장 코드 내에서 `eval()` 및 `new Function()`을 사용하는 것이 금지되어 있습니다. 이러한 기능은 임의의 코드 실행을 허용하며, 이는 심각한 보안 취약점이 될 수 있습니다.

마이그레이션 전략:

• 코드 재설계: 가장 강력한 솔루션은 동적 코드 실행을 피하도록 코드를 재설계하는 것입니다. 함수 이름 또는 코드 조각을 동적으로 생성하는 경우 사전 정의된 구조, 구성 객체 또는 템플릿 리터럴을 사용하는 것을 고려하십시오.
• JSON 구문 분석: `eval()`이 JSON 구문 분석에 사용된 경우 `JSON.parse()`로 전환합니다. 이는 JSON 데이터를 처리하는 표준적이고 안전한 방법입니다.
• 객체 매핑: `new Function()`이 입력에 따라 동적으로 함수를 생성하는 데 사용된 경우 객체 맵을 사용하거나 스위치 문을 사용하여 입력을 사전 정의된 함수에 매핑하는 것을 살펴보십시오.
• 예:

  이전(Manifest V2, 권장하지 않음):

              const dynamicFunctionName = 'myDynamicFunc';
  const code = 'console.log("Hello from dynamic function!");';
  
  const dynamicFunc = new Function(code);
  dynamicFunc();
  
  // Or for JSON parsing:
  const jsonString = '{"key": "value"}';
  const jsonData = eval('(' + jsonString + ')'); // Insecure
              
  
                
                  Copy
                
              
            

  이후(Manifest V3, 안전):

              // For dynamic functions:
  function myDynamicFunc() {
    console.log("Hello from pre-defined function!");
  }
  
  // If you need to call it dynamically based on a string, you can use an object map:
  const availableFunctions = {
    myDynamicFunc: myDynamicFunc
  };
  
  const functionToCall = 'myDynamicFunc';
  if (availableFunctions[functionToCall]) {
    availableFunctions[functionToCall]();
  } else {
    console.error('Function not found');
  }
  
  // For JSON parsing:
  const jsonString = '{"key": "value"}';
  const jsonData = JSON.parse(jsonString); // Secure and standard
  console.log(jsonData.key); // "value"
              
  
                
                  Copy
                
              
            

5. 기타 중요한 API 고려 사항

Manifest V3는 다른 여러 API에 영향을 미치며, 이러한 변경 사항을 인식하는 것이 중요합니다.

• `chrome.tabs` API: `chrome.tabs` API의 일부 메서드는 특히 탭 생성 및 관리에 관하여 다르게 동작할 수 있습니다. 최신 권장 패턴을 사용하고 있는지 확인하십시오.
• `chrome.storage` API: `chrome.storage` API(local 및 sync)는 대부분 동일하게 유지되며 서비스 워커 종료 시 데이터를 유지하는 데 필수적입니다.
• 권한: 확장 프로그램의 권한을 재평가하십시오. MV3는 필요한 권한만 요청하도록 권장하며 보다 세분화된 제어를 제공합니다.
• 사용자 인터페이스 요소: 확장 프로그램 팝업 및 옵션 페이지는 주요 UI 요소로 유지됩니다. 새로운 서비스 워커 아키텍처에서 작동하도록 업데이트되었는지 확인하십시오.

마이그레이션을 위한 도구 및 모범 사례

확장 프로그램을 마이그레이션하는 것은 복잡한 프로세스가 될 수 있습니다. 다행히 더 원활하게 만들 수 있는 도구와 모범 사례가 있습니다.

• 공식 문서: 브라우저 공급업체(특히 Chrome 및 Firefox)의 문서는 기본 리소스입니다. Manifest V3 마이그레이션 가이드를 철저히 읽어보세요.
• 브라우저 개발자 도구: 대상 브라우저의 개발자 도구를 활용하십시오. 이는 오류, 서비스 워커 수명 주기 및 네트워크 활동에 대한 귀중한 통찰력을 제공합니다.
• 점진적 마이그레이션: 대규모 확장 프로그램이 있는 경우 점진적 마이그레이션 전략을 고려하십시오. 한 번에 하나의 기능 또는 API를 마이그레이션하고, 철저히 테스트한 다음 다음 단계로 이동합니다.
• 자동화된 테스트: 강력한 테스트 제품군을 구현합니다. 자동화된 테스트는 회귀를 포착하고 마이그레이션된 확장 프로그램이 다양한 시나리오에서 예상대로 작동하는지 확인하는 데 필수적입니다.
• 코드 린팅 및 분석: MV3 개발에 맞게 구성된 린터(예: ESLint)를 사용하여 잠재적인 문제를 조기에 포착합니다.
• 커뮤니티 포럼 및 지원: 개발자 커뮤니티에 참여하십시오. 많은 개발자들이 유사한 문제에 직면하고 있으며, 경험을 공유하면 효과적인 솔루션으로 이어질 수 있습니다.
• 차단된 기능에 대한 대안 고려: 확장 프로그램의 핵심 기능이 MV3에서 심각하게 제한되거나 제거된 API(예: 특정 `webRequest` 기능)에 의존하는 경우 대체 접근 방식을 탐색하십시오. 여기에는 아직 사용할 수 있는 브라우저 API 활용, 클라이언트 측 휴리스틱 사용 또는 해당 기능의 구현을 재고하는 것이 포함될 수 있습니다.

Manifest V3에 대한 글로벌 고려 사항

글로벌 사용자를 대상으로 하는 개발자로서 MV3의 변경 사항이 다양한 지역과 컨텍스트의 사용자에게 어떤 영향을 미칠 수 있는지 고려하는 것이 중요합니다.

• 다양한 장치에서 성능: 서비스 워커의 효율성 증가는 개발도상국을 비롯한 많은 곳에서 흔히 사용되는 저전력 장치 또는 느린 인터넷 연결을 사용하는 사용자에게 특히 유익합니다.
• 전 세계적인 개인 정보 보호 문제: MV3의 강화된 개인 정보 보호는 전 세계적인 데이터 개인 정보 보호 규정(예: GDPR, CCPA) 및 사용자 기대를 충족합니다. 이는 다양한 사용자 기반 사이에서 더 큰 신뢰를 조성할 수 있습니다.
• 웹 표준 정렬: MV3는 주로 Chromium에 의해 주도되지만, 더 안전하고 개인 정보를 보호하는 웹 확장 프로그램 모델로의 전환은 글로벌 트렌드입니다. 이러한 변화를 앞서나가면 광범위한 플랫폼 호환성 및 미래 웹 표준에 대한 확장 프로그램을 준비할 수 있습니다.
• 문서 접근성: 의존하는 마이그레이션 리소스가 접근 가능하고 필요한 경우 명확하게 번역되었는지 확인하십시오. 이 게시물은 영어로 작성되었지만, 전 세계의 개발자는 현지화된 리소스를 찾을 수 있습니다.
• 지역별 테스트: 확장 프로그램의 기능이 네트워크에 종속되거나 지역에 따라 미묘한 UI 차이가 있을 수 있는 경우, 다양한 지리적 위치 및 네트워크 조건에서 테스트를 수행하는지 확인하십시오.

Manifest V3를 사용한 브라우저 확장 프로그램의 미래

Manifest V3는 단순한 업데이트가 아니라 더 안전하고, 개인 정보 보호가 강화되고, 성능이 향상된 웹 확장 프로그램 생태계로의 중요한 단계입니다. 마이그레이션은 어려움을 제시하지만, 개발자가 더 좋고 더 책임감 있는 확장 프로그램을 구축할 수 있는 기회를 제공합니다. 핵심 API 변경 사항을 이해하고 전략적 마이그레이션 방식을 채택함으로써 전 세계 사용자에게 브라우저 확장 프로그램이 관련성이 있고 가치 있게 유지되도록 할 수 있습니다.

전환을 수용하고, 새로운 기능을 활용하고, 혁신을 계속하십시오. 브라우저 확장 프로그램의 미래가 여기에 있으며, 보안과 사용자 신뢰를 기반으로 구축되었습니다.